<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_事件监听</title>
</head>
<body>
<button onclick="alert('警告框')">弹出警告框</button>
<button id="btn">点击按钮</button>
<h4>滴滴滴滴滴监听你</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores at aut, consequuntur earum facere
        harum inventore neque obcaecati quaerat repudiandae sit sunt suscipit vel veniam. Consectetur minus recusandae
        rem.
    </div>
    <div>Consequuntur cumque esse iure non obcaecati quisquam, quod ratione repellendus similique tempora voluptas
        voluptatum! Adipisci deserunt molestias natus odit officiis optio veritatis. Atque deleniti excepturi iusto non
        omnis sed vel?
    </div>
    <div>Accusantium corporis ducimus eaque eum fugiat pariatur quis quisquam. Beatae commodi distinctio dolores dolorum
        eaque facilis harum inventore itaque labore, minus modi odit perferendis praesentium qui quibusdam quisquam
        saepe sapiente!
    </div>
    <div>Aperiam aut dignissimos distinctio eius enim fugiat inventore iure laudantium magni maiores necessitatibus
        neque nisi non optio perspiciatis possimus ratione reiciendis rem repellat sint soluta, ut vero voluptas
        voluptatem voluptatibus.
    </div>
    <div>Asperiores cumque delectus doloremque doloribus dolorum eos eum facere, facilis hic illo ipsam itaque laborum
        maiores, mollitia non omnis placeat quaerat quam reprehenderit soluta totam vel, velit veniam vero vitae.
    </div>
    <div>Id, maiores, nemo! Amet aspernatur aut, consequatur corporis cumque cupiditate delectus error et id impedit in
        inventore laboriosam maxime modi nihil provident, ratione, rem sit suscipit ullam vero voluptatem voluptatibus.
    </div>
    <div>Accusamus aliquam asperiores, commodi cum cupiditate eligendi esse id, illum laborum molestiae, omnis quibusdam
        repellendus voluptatibus. Accusamus, alias culpa, dolor, earum iste maiores mollitia non numquam porro sapiente
        tenetur voluptatum.
    </div>
    <div>Accusantium alias architecto assumenda atque beatae consectetur consequuntur cum ea eius enim facilis hic illo
        illum inventore libero, nihil perspiciatis placeat possimus quibusdam quidem repellendus saepe sequi tenetur
        vitae voluptatibus.
    </div>
    <div>Aliquid beatae cum delectus dolor explicabo hic magni maxime minima nisi, odit officia optio pariatur possimus,
        quibusdam quod rem repellendus saepe sint suscipit tenetur. Ad dolore molestias officia possimus sapiente.
    </div>
    <div>Dignissimos ducimus explicabo id illum iusto molestias nisi reiciendis. Aspernatur deleniti, inventore ipsa
        maxime nemo qui quod tempore ut! Aliquam explicabo facilis perferendis quae, quaerat quam quas ratione saepe
        voluptas.
    </div>
    <div>Animi beatae eius fuga laudantium perspiciatis provident quo, quos recusandae reiciendis rerum. Accusantium
        deleniti dolor dolore eaque et eveniet illum nemo, nesciunt officiis perferendis, velit, veritatis? Animi eos
        fugiat voluptates.
    </div>
    <div>Alias dicta enim expedita harum inventore recusandae, similique ullam. Architecto delectus, harum hic impedit
        incidunt magnam, maiores natus neque obcaecati optio porro qui quidem quo rem repudiandae similique tempora
        tempore.
    </div>
    <div>Dolorum exercitationem molestias nam necessitatibus nisi repellendus. Delectus excepturi ipsa possimus sapiente
        ut. Dolore ducimus eaque explicabo molestias nulla placeat quidem repellat. Accusamus aliquam assumenda culpa
        ipsam labore nobis soluta.
    </div>
    <div>Ab ad adipisci aperiam autem consectetur dolore esse eum facere magni molestiae nesciunt nihil possimus quasi,
        rem repellat voluptas voluptates voluptatum. Asperiores delectus esse eveniet explicabo facilis nostrum
        obcaecati suscipit.
    </div>
    <div>Ab aliquid consectetur dolor dolorem doloremque doloribus earum enim fugit, ipsam natus nostrum, obcaecati
        quasi quo ratione ut. Deserunt ea fugit minima minus nesciunt possimus quae ratione tempore vel velit.
    </div>
    <div>Ad autem dolore dolorem eaque error explicabo fuga impedit iure laboriosam libero magnam modi nam nesciunt nisi
        nobis, numquam officia pariatur perspiciatis quibusdam quos ratione reiciendis rem similique tempora voluptate?
    </div>
    <div>Architecto atque commodi cumque dicta dolore ducimus est eum, ex exercitationem magnam molestiae nam nesciunt,
        nulla obcaecati omnis placeat praesentium quibusdam reprehenderit sit soluta suscipit ut voluptate. A,
        exercitationem officia.
    </div>
    <div>Facere harum iusto libero possimus quam rerum soluta ut. Accusamus, atque eos explicabo facilis ipsa iste quis.
        Ad alias consequuntur exercitationem harum, illum iste obcaecati placeat rem soluta ullam unde.
    </div>
    <div>Accusantium ad animi aperiam debitis doloribus eius exercitationem illum impedit iure laudantium natus nostrum
        obcaecati praesentium quas quod reiciendis sed tempora, temporibus! Blanditiis eius eum praesentium, quod
        recusandae unde vitae.
    </div>
    <div>A aperiam aspernatur ducimus exercitationem explicabo in ipsa ipsam laudantium obcaecati possimus quam, rem
        temporibus totam voluptate voluptatibus? Accusamus aperiam dicta doloremque excepturi fugiat hic labore laborum
        quas. Ad, necessitatibus.
    </div>
    <div>Accusamus ad aliquam enim, eum facilis incidunt minima officia omnis optio pariatur placeat quas quisquam
        sapiente tempore, ullam voluptas voluptates? Aspernatur, at consequatur excepturi impedit ipsam iste nihil quae
        vel!
    </div>
    <div>Adipisci animi consequatur culpa cum cupiditate deserunt eum exercitationem expedita facilis illo incidunt
        iste, minus mollitia nulla perferendis quia quisquam repellendus repudiandae rerum tempore tenetur totam ut vel
        veritatis voluptatibus.
    </div>
    <div>Cupiditate distinctio dolores error in optio perferendis voluptas voluptates. Ad consequatur cumque deleniti
        deserunt eius expedita necessitatibus nisi odit omnis pariatur praesentium quaerat quam quidem ratione
        recusandae reiciendis repellat, saepe.
    </div>
    <div>Aut corporis cupiditate distinctio, eum fugit iure iusto nostrum quidem. Eveniet natus nobis, perferendis
        possimus ratione rerum tempora. Ad alias consectetur consequuntur dignissimos eaque est facilis illo iste itaque
        iure!
    </div>
    <div>Amet assumenda aut blanditiis commodi culpa cum dicta dignissimos dolorum, error et eveniet exercitationem,
        itaque labore, laborum modi molestiae non perspiciatis quaerat quidem repellendus sequi similique sint suscipit
        tenetur veniam?
    </div>
    <div>Aperiam cumque deserunt dignissimos doloribus obcaecati perspiciatis quam quia sequi tempora voluptates? Ab
        commodi, consequatur delectus, excepturi maiores minus neque officiis, pariatur quae quidem repellat
        reprehenderit saepe temporibus tenetur velit.
    </div>
    <div>Accusamus cumque illum inventore iusto nam non veritatis voluptate. Corporis deserunt ea facere illum, impedit
        ipsam iusto laudantium maxime molestiae molestias nam quo similique sit temporibus, unde velit, veniam
        voluptatibus.
    </div>
    <div>Atque esse illo nisi repellendus! Commodi deserunt dicta dolore dolorem dolorum exercitationem fugit in iure
        libero natus necessitatibus, perferendis possimus provident quas quibusdam reiciendis sapiente sit! Architecto
        delectus earum voluptas?
    </div>
    <div>Animi autem cumque cupiditate doloribus excepturi expedita impedit, labore minima odit omnis optio sed! Aliquid
        deleniti excepturi, maxime modi nemo quae quaerat recusandae saepe. Aliquid deserunt enim odit ullam voluptatum!
    </div>
    <div>Accusantium alias animi corporis cum cupiditate eveniet id labore laboriosam, maiores nam necessitatibus nisi
        non, officia officiis quia quisquam repellendus reprehenderit sunt totam, ut? Aliquam dicta enim iste mollitia
        recusandae.
    </div>
    <div>A, atque beatae consequuntur dignissimos distinctio dolorem dolores ea eos facere iure laborum minus molestiae
        necessitatibus nihil obcaecati officiis, quam quos repellendus reprehenderit sapiente similique sint sunt
        temporibus, vel voluptatem?
    </div>
    <div>A aliquam commodi culpa delectus deserunt dolorem ducimus eveniet excepturi explicabo impedit ipsa ipsam iure,
        laboriosam minima nisi officia optio possimus quis quod repellat repellendus, reprehenderit suscipit vel, vero
        voluptatem!
    </div>
    <div>Ab hic obcaecati quam quo, ratione repellat sapiente vero. Aliquid animi assumenda consectetur culpa, deleniti
        distinctio dolore facere hic inventore iste mollitia nam necessitatibus placeat porro quidem quisquam quo
        soluta.
    </div>
    <div>Adipisci aliquid consequatur culpa dolores eos error facilis id impedit ipsum iste iure iusto laboriosam
        mollitia natus, necessitatibus nemo optio, possimus, praesentium rem similique tenetur ullam ut voluptates.
        Distinctio, quis.
    </div>
    <div>Alias, aperiam dolorem ea harum labore nisi nulla omnis perferendis placeat provident repellat sapiente unde?
        Doloribus eum inventore itaque laboriosam molestiae mollitia nam quis quos, reiciendis repudiandae sequi vel
        voluptatum.
    </div>
    <div>Adipisci aspernatur consectetur delectus ducimus error eveniet exercitationem fugit in mollitia natus odit
        optio pariatur placeat, praesentium quia repudiandae rerum sapiente tempora, tenetur ullam unde ut voluptatem
        voluptatibus? Distinctio, fugiat!
    </div>
    <div>Assumenda at, debitis dolores doloribus ducimus earum eligendi esse est id illum incidunt iure magni minus
        mollitia nemo omnis placeat possimus reiciendis soluta tempore. Facilis harum impedit laborum placeat vel.
    </div>
    <div>Dicta iste maxime quasi qui sit unde vero? Eos, et, fugit. A aliquam dolorem eaque fuga, ipsa laborum maiores
        neque obcaecati odit, officiis rem suscipit voluptate! Dolor minus numquam placeat!
    </div>
    <div>A aliquid amet, aperiam consequatur cupiditate debitis dicta distinctio ducimus ea eligendi exercitationem
        explicabo fugiat labore odio officiis, pariatur perspiciatis possimus quaerat quam ratione rem rerum saepe sed
        sit tempora.
    </div>
    <div>Ab alias at delectus dolores eius explicabo fugiat impedit incidunt inventore ipsum, minus natus nesciunt optio
        praesentium provident quaerat reiciendis rem, rerum sint soluta tempora ullam unde, vel voluptas voluptatibus.
    </div>
    <div>At autem doloremque dolorum eius expedita explicabo illo in ipsa ipsum, iure necessitatibus non nostrum porro
        praesentium reiciendis rerum, similique, suscipit tenetur ullam veniam? Ab deleniti esse iste obcaecati tempora.
    </div>
    <div>Accusamus aliquid aut dicta exercitationem fugiat iure iusto labore libero, quae quasi quisquam quo voluptatem
        voluptatum! Deleniti obcaecati perspiciatis quibusdam vel voluptatem? Debitis ea iure molestiae omnis
        perferendis possimus temporibus.
    </div>
    <div>Accusantium, aliquid atque, aut delectus dicta dolores earum eius esse explicabo, harum id illo ipsam libero
        maxime nam natus necessitatibus nostrum provident quas ratione rem sint vel veniam vero voluptatum?
    </div>
    <div>Aliquid cum enim fuga libero nostrum qui quia quod repellat reprehenderit sunt! Culpa distinctio doloremque et
        eum in laborum nihil omnis, quaerat quas, quos sunt tempora tenetur vero? Autem, mollitia?
    </div>
    <div>A magni maiores nihil nostrum sunt, vero voluptas? Ab aliquid cum illo iusto quam quibusdam saepe sint? Dolorum
        est laboriosam nihil ullam. Animi enim facere fugiat odit reiciendis rem, rerum.
    </div>
    <div>Enim fugit illum molestias recusandae vitae. Amet, architecto atque aut commodi doloremque dolores dolorum
        eligendi eos facilis iusto, quae quam quia quisquam sit voluptatem! Debitis maiores odio officia quaerat
        repellat?
    </div>
    <div>Accusantium consequatur cupiditate dolorum eius eligendi facilis illo iure laboriosam laborum laudantium nihil
        numquam, officiis optio possimus quidem, quis quisquam reiciendis saepe sequi similique temporibus totam ullam
        voluptates? Temporibus, vel.
    </div>
    <div>Ad consequuntur ea fuga ipsam maxime nesciunt odit sint tenetur? At atque beatae consequuntur dicta enim id
        neque nihil nostrum, nulla optio perferendis placeat quam saepe sapiente sed sit suscipit.
    </div>
    <div>Atque corporis explicabo ipsam optio quasi qui, repellendus veritatis voluptatibus. Blanditiis et
        exercitationem, fugiat id impedit maxime, natus nulla omnis possimus provident quae quasi similique soluta
        suscipit unde velit voluptatum!
    </div>
    <div>At commodi quae voluptate. Ad, alias animi aspernatur atque consequatur deleniti enim et harum laboriosam,
        libero officia possimus quaerat quisquam sapiente ullam? Nihil nisi numquam optio, perferendis quia quo quod?
    </div>
    <div>Hic obcaecati voluptas voluptatibus. Assumenda beatae commodi consequuntur distinctio doloremque est facilis
        fuga impedit inventore, ipsum labore maxime molestias necessitatibus possimus repellat sequi similique soluta
        tenetur ullam unde veritatis voluptates!
    </div>
    <div>Earum, perferendis quod! At blanditiis cum et facilis molestias non pariatur repellat suscipit, ullam vitae.
        Aliquid commodi consectetur consequatur cumque eum fuga harum impedit nam nostrum perferendis ratione sapiente,
        tenetur.
    </div>
    <div>Ab asperiores aspernatur aut delectus dolor dolores esse exercitationem expedita facilis harum impedit libero
        magni nam natus nulla porro quam quia, ratione rerum, saepe sed sequi similique tempora vitae voluptatem?
    </div>
    <div>Asperiores hic labore quae vitae voluptates! Alias architecto assumenda debitis ea ex facilis in itaque
        laudantium magnam necessitatibus nemo numquam odit optio quis recusandae, reprehenderit saepe, tenetur unde
        veritatis voluptatum.
    </div>
    <div>Architecto at aut blanditiis consectetur doloremque error, exercitationem expedita fuga fugiat impedit ipsam
        laborum magni maiores numquam odio, officia quasi quisquam quo quod repellendus tempora ut vitae voluptatibus?
        Aliquam, fugiat.
    </div>
    <div>Ad culpa cumque dicta doloremque, doloribus fuga magni pariatur perspiciatis praesentium quasi quis quisquam
        recusandae repudiandae sunt tempora voluptas, voluptatum! Commodi deserunt eum id illo itaque nulla placeat
        possimus quibusdam!
    </div>
    <div>Distinctio doloremque dolorum eaque explicabo impedit ipsam iusto maxime rerum totam ullam! Accusamus ad alias
        cumque fugit iste itaque magni mollitia nulla similique voluptas. Adipisci aperiam corporis deserunt eum magnam!
    </div>
    <div>Dolorum eos esse ex impedit libero magnam sunt vitae. Amet deleniti error est laboriosam magnam maiores
        mollitia neque optio pariatur quo? Accusantium dolor error facere illum incidunt provident quibusdam reiciendis.
    </div>
    <div>A, ab asperiores assumenda aut debitis dolore est explicabo iure labore libero necessitatibus odio repudiandae
        tempore? Adipisci atque delectus dolores eius impedit ipsam maxime, necessitatibus quaerat repellendus saepe
        totam, unde.
    </div>
    <div>Adipisci amet asperiores at autem consequuntur, corporis debitis deleniti dignissimos earum excepturi explicabo
        fuga, fugiat ipsum iusto, laboriosam libero magnam necessitatibus neque nobis praesentium rem reprehenderit
        repudiandae sit tempora vero!
    </div>
</div>

<script>
    let  buttonE = document.querySelector('#btn');
    buttonE.addEventListener('click', function (){
        alert('点击了按钮');
    })

    let h4E = document.querySelector('h4');
    h4E.addEventListener('mouseover',function (){
        console.log('鼠标移入');
    })
    // window.addEventListener('resize',function (){
    //     alert('窗口大小发生改变');
    // })
    // window.addEventListener('scroll',function (){
    //     alert('页面滚动了');
    // })
    //1.创建一个自带属性与方法的对象
    let p = {
        name: '张三',
        age: 18,
        show: function (){
            console.log('我是' + this.name + '今年' + this.age);
        }
    };
    p.show();
    console.log(p.name);
    console.log(p.age);
    //2.创建一个空对象，再动态添加属性和方法
    let p2 = {};
    p2.name = '李四';
    p2.age = 20;
    p2.show = function (){
        console.log('我是' + this.name + '今年' + this.age);
    };
    p2.show();
    console.log(p2.name);
    console.log(p2.age);
</script>

</body>
</html>